<!--
 * @Author: Caroline 
 * @Date: 2018-10-23 10:27:32 
 * @Last Modified by: Caroline
 * @Last Modified time: 2018-10-24 10:38:37
 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--告诉IE以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染-->
    <title>工程讲堂-产品讲坛</title>
    <link rel="stylesheet" href="../plugin/layui/css/layui.css">
    <link rel="stylesheet" href="../resources/css/basic.css">
    <link rel="stylesheet" href="../resources/css/pubComponet.css">
    <link rel="stylesheet" href="../resources/css/engineering.css">
    <script src="../js/jquery.min.js"></script>
    <script>
        //渲染公共头部导航
        $(function () {
            setNav("page-engineerForm", "../pages/index_nav.html", "");
        })
    </script>
</head>

<body id="engineer-product">
    <div id="header">
        <div id="head"></div>
        <div id="nav"></div>
    </div>
    <div class="main_container">
        <div class="banner">
            <img src="../resources/images/product-banner.jpg" alt="">
        </div>
        <div class="layout">
            <!-- 产品经 -->
            <p class="line-gradientBgLeft titleWrap">
                <span>产 品 经</span>
                <span>热 门 精 选 推 荐 ，购 机 必 读 宝 典</span>
            </p>
            <section class="floatWrapDiv">
                <div class="productHot-item">
                    <div class="betweenWrapDiv clearfix">
                        <div>
                            <h5>精选推荐</h5>
                        </div>
                        <div class="text-right"><a href="">查看更多</a></div>
                    </div>
                    <div class="betweenWrapDiv">
                        <div class="imgWrap">
                            <img src="../resources/images/product-recommend.jpg" alt="">
                        </div>
                        <div>
                            <h5>海尔冰箱让西兰花7天仍如嫩芽初绽</h5>
                            <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                            <div class="text-right"><a href="">>>详情</a></div>
                        </div>
                    </div>
                    <ul class="minUl betweenWrapUl">
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                    </ul>
                </div>
                <div class="productHot-item">
                    <div class="betweenWrapDiv clearfix">
                        <div>
                            <h5>购机必读</h5>
                        </div>
                        <div class="text-right"><a href="">查看更多</a></div>
                    </div>
                    <div class="betweenWrapDiv">
                        <div class="imgWrap">
                            <img src="../resources/images/product-recommend.jpg" alt="">
                        </div>
                        <div>
                            <h5>空调生产商告诉你空调该如何清洗</h5>
                            <div>炎炎夏日，容易忽视了一直蛰伏在你身边的巨大 隐患—那就是为你带来凉爽的空调。你的空调有 多脏，危害有多大?</div>
                            <div class="text-right"><a href="">>>详情</a></div>
                        </div>
                    </div>
                    <ul class="minUl betweenWrapUl">
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>存储7天后表面的小花蕾仍如树上初绽的</span>
                            <span>2018.09</span>
                        </li>
                    </ul>
                </div>
                <div class="productHot-item">
                    <div class="betweenWrapDiv clearfix">
                        <div>
                            <h5>产品百科</h5>
                        </div>
                        <div class="text-right"><a href="">查看更多</a></div>
                    </div>
                    <div class="betweenWrapDiv">
                        <div class="imgWrap">
                            <img src="../resources/images/product-recommend.jpg" alt="">
                        </div>
                        <div>
                            <h5>海尔冰箱让西兰花7天仍如嫩芽初绽</h5>
                            <div>用微距微镜头观测拍摄的海尔飨宴冰箱内 西兰花的表面景观，存储7天后表面的小 花蕾仍如树上初绽的嫩芽般新鲜</div>
                            <div class="text-right"><a href="">>>详情</a></div>
                        </div>
                    </div>
                    <ul class="minUl betweenWrapUl">
                        <li>
                            <span>家用空调厂家解析空调除湿和制冷的区别？</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>平板太阳能热水器是什么，有什么优势？</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>台式净水机怎么安装—海尔台式净水器型号推</span>
                            <span>2018.09</span>
                        </li>
                    </ul>
                </div>
                <div class="productHot-item">
                    <div class="betweenWrapDiv clearfix">
                        <div>
                            <h5>热议话题</h5>
                        </div>
                        <div class="text-right"><a href="">查看更多</a></div>
                    </div>
                    <div class="betweenWrapDiv">
                        <div class="imgWrap">
                            <img src="../resources/images/product-recommend.jpg" alt="">
                        </div>
                        <div>
                            <h5>空调生产商告诉你空调该如何清洗</h5>
                            <div>炎炎夏日，容易忽视了一直蛰伏在你身边的巨大 隐患—那就是为你带来凉爽的空调。你的空调有 多脏，危害有多大?</div>
                            <div class="text-right"><a href="">>>详情</a></div>
                        </div>
                    </div>
                    <ul class="minUl betweenWrapUl">
                        <li>
                            <span>家用空调厂家解析空调除湿和制冷的区别？</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>平板太阳能热水器是什么，有什么优势</span>
                            <span>2018.09</span>
                        </li>
                        <li>
                            <span>台式净水机怎么安装—海尔台式净水器型号推 </span>
                            <span>2018.09</span>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- 值得购 -->
            <p class="line-gradientBgLeft titleWrap">
                <span>值 得 购</span>
                <span>主 题 精 选 ，品 质 推 荐</span>
                <span style="float:right;"><a href="">查看更多</a></span>
            </p>
            <section class="betweenWrapDiv">
                <div>
                    <div class="imgWrap">
                        <img src="../resources/images/product-worthBuy1.jpg" alt="">
                    </div>
                    <ul class="betweenWrapUl minUl">
                        <li>
                            <span>家用空调厂家解析空调除湿和制冷的区别？</span>
                            <span>2018.09 </span>
                        </li>
                        <li>
                            <span>平板太阳能热水器是什么，有什么优势</span>
                            <span>2018.09 </span>
                        </li>
                        <li>
                            <span>台式净水机怎么安装—海尔台式净水器型号推 </span>
                            <span>2018.09 </span>
                        </li>
                    </ul>
                </div>
                <div>
                    <div class="imgWrap">
                        <img src="../resources/images/product-worthBuy2.jpg" alt="">
                    </div>
                    <ul class="betweenWrapUl minUl">
                        <li>
                            <span>家用空调厂家解析空调除湿和制冷的区别？</span>
                            <span>2018.09 </span>
                        </li>
                        <li>
                            <span>平板太阳能热水器是什么，有什么优势</span>
                            <span>2018.09 </span>
                        </li>
                        <li>
                            <span>台式净水机怎么安装—海尔台式净水器型号推 </span>
                            <span>2018.09 </span>
                        </li>
                    </ul>
                </div>

            </section>
            <!-- 特别专题 -->
            <p class="line-gradientBgLeft titleWrap">
                <span>特 别 专 题</span>
                <span>专 题 方 案 ，详 情 解 读</span>
                <span style="float:right;"><a href="">查看更多</a></span>
            </p>
            <section id="productSpecial" class="floatWrapDiv">
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_1.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_2.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_3.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap margin_r0">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_4.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_5.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_6.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_7.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap imgMaskWrap margin_r0">
                    <div class="imgMask">
                        <div class="centerDiv">
                            <h4>磁 悬 浮</h4>
                            <p>中 央 空 调</p>
                        </div>
                    </div>
                    <a href="">
                        <img src="../resources/images/productSpecial_8.jpg" alt="">
                    </a>
                </div>
            </section>
            <!-- 在线课堂 -->
            <p class="line-gradientBgLeft titleWrap">
                <span>在 线 课 堂</span>
                <span>产 品 培 训 ，在 线 直 播</span>
                <span style="float:right;"><a href="">查看更多</a></span>
            </p>
            <section id="productClass" class="floatWrapDiv">
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_1.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_2.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_3.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap margin_r0">
                    <a href="">
                        <img src="../resources/images/productClass_4.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_5.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_6.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap">
                    <a href="">
                        <img src="../resources/images/productClass_7.jpg" alt="">
                    </a>
                </div>
                <div class="imgWrap margin_r0">
                    <a href="">
                        <img src="../resources/images/productClass_8.jpg" alt="">
                    </a>
                </div>
            </section>
        </div>
        <!-- 图话产品 -->
        <div id="engineerImgProduct" style="background-color:#666666;">
            <section class="floatWrapDiv layout">
                <div id="textDescribe">
                    <h3>图话产品</h3>
                    <div class="pd_l32 mg24">产品视界 卖点图说</div>
                    <ul class="minUl">
                        <li>我们不仅净化水，更是你的用水管家</li>
                        <li>我不是水神，却能解决你的用水问题</li>
                        <li>自来水【过氯】后仍需过滤</li>
                        <li>为什么代购的很多电器都水土不服？</li>
                        <li>水里的重金属，摇滚着你的健康</li>
                        <li>住宅为什么要配备全屋净水系统？</li>
                    </ul>
                </div>
                <div id="imgShow">
                    <div class="text-right">
                        <a href="">查看更多</a>
                    </div>
                    <div class="layui-carousel" id="test3" lay-filter="test4">
                        <div carousel-item="">
                            <div class="imgWrap">
                                <img src="../resources/images/productSpecial_2.jpg" alt="">
                            </div>
                            <div class="imgWrap">
                                <img src="../resources/images/productSpecial_5.jpg" alt="">
                            </div>
                            <div class="imgWrap">
                                <img src="../resources/images/productSpecial_8.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!-- 吐槽杂谈 make complaints /talk-->
        <div id="talkWrap"></div>
    </div>
    <div id="footer"></div>
    <script src="../plugin/layui/layui.js"></script>
    <script src="../js/basic.js"></script>
    <script>
        layui.use(['carousel'], function () {
            var carousel = layui.carousel;
            //设定各种参数
            var ins3 = carousel.render({
                elem: "#test3",
                anim: "updown",
                arrow: "hover",
                width: "860.5px",
                height: "219px"
            });
        });
    </script>
</body>

</html>